<!-- 教师端评分管理模块 -->
<template>
    <!-- <el-form :model="form" label-width="80px" class="form-container">
    <el-row :gutter="20"> -->
      <!-- 论文名称 -->
      <!-- <el-col :span="6">
        <el-form-item label="论文题目">
          <el-input v-model="form.title" placeholder="请输入论文名称" />
        </el-form-item>
      </el-col> -->
      <!-- 学生姓名 -->
      <!-- <el-col :span="6">
        <el-form-item label="学生姓名">
          <el-input v-model="form.studentName" placeholder="请输入学生姓名" />
        </el-form-item>
      </el-col> -->

      <!-- 操作按钮 -->
      <!-- <el-col :span="6" class="btn-group">
        <el-form-item label=" ">
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form> -->

    <div class="all">
        <el-table
            :data="tableData"
            style="width: 100%"
            height="450"
            :align="'center'">
            
            <el-table-column
            fixed
            prop="title"
            label="论文题目"
            :align="'center'">
            </el-table-column>
            <el-table-column
            prop="sname"
            label="学生姓名"
            :align="'center'">
            </el-table-column>
            <el-table-column
            prop="sid"
            label="学生学号"
            :align="'center'">
            </el-table-column>
            <el-table-column
            prop="xtscore"
            label="选题意义"
            :align="'center'">
            </el-table-column>
            <el-table-column
            prop="xzscore"
            label="写作安排"
            :align="'center'">
            </el-table-column>
            <el-table-column
            prop="ljscore"
            label="逻辑构建"
            :align="'center'">
            </el-table-column>
            <el-table-column
            prop="zyscore"
            label="专业能力"
            :align="'center'">
            </el-table-column>
            <el-table-column
            prop="xsscore"
            label="学术规范"
            :align="'center'">
            </el-table-column>
            <el-table-column
            label="操作"
            :align="'center'">
            <div>
                <!-- Form -->
                <el-button :icon="Edit" type="text" @click="openDialog">修改</el-button>
        

            </div>
            </el-table-column>
            
        </el-table>
                <el-dialog v-model="dialogVisible" title="复杂表格" width="1000px">
                    <el-table
                    :data="dialogTableData"
                    border
                    style="width: 100%"
                    :span-method="mergeCells"
                    >
                    <!-- 第一列 -->
                    <el-table-column label="大类" align="center" width="220">
                        <template #default="scope">
                        <el-form-item :label="scope.row.firstLabel+ '（' + scope.row.firstRatio + '%）'" label-width="125px">
                            <el-input v-model="scope.row.firstValue" placeholder="输入值" />
                        </el-form-item>
                        </template>
                    </el-table-column>

                    <!-- 第二列 -->
                    <el-table-column label="子类" align="center" width="280">
                        <template #default="scope">
                        <el-form-item :label="scope.row.secondLabel+ '（' + scope.row.secondRatio + '%）'" label-width="190px">
                            <el-input v-model="scope.row.secondValue" placeholder="输入值" />
                        </el-form-item>
                        </template>
                    </el-table-column>

                    <!-- 第三列 -->
                    <el-table-column label="说明" align="center">
                        <template #default="scope">
                        {{ scope.row.text }}
                        </template>
                    </el-table-column>
                    </el-table>

                    <template #footer>
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveChanges">保存</el-button>
                    </template>
                </el-dialog>
    </div>
    <div class="block">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
        </el-pagination>
    </div>
</template>

<script setup>
    import { reactive, ref } from 'vue'
    import { Edit,QuestionFilled } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus' // ✅ 导入消息提示
    const dialogFormVisible = ref(false)
    const form1 = reactive({
    title: '',
    major: '',
    studentName: '',
    })
    const form = reactive({
        gscore:67,
        nscore:78,
        wscore:76,
        lscore:76
    })
        
    // 每个下拉框独立的数据源
    // const value2 = ref('')
    const options2 = [
    { value: 'a', label: '计算机科学与技术' },
    { value: 'b', label: '软件工程' },
    { value: 'c', label: '人工智能' }
    ]
    const tableData = ref([
     {
        title: '基于 HTML 的论文分析系统',
        sname: '王小虎',
        sid: '2923048',
        major: '软件工程',
        time: '2023-3-3',
        xtscore: "33",
        xzscore: "34",
        ljscore: "35",
        zyscore: "36",
        xsscore: "34"
    },
    {
        title: '基于 Vue 的论文检测平台',
        sname: '李晓明',
        sid: '2923049',
        major: '人工智能',
        time: '2023-3-4',
        xtscore: "31",
        xzscore: "32",
        ljscore: "33",
        zyscore: "34",
        xsscore: "33"
    },
    {
        title: '毕业论文质量分析系统',
        sname: '张雨欣',
        sid: '2923050',
        major: '计算机科学',
        time: '2023-3-5',
        xtscore: "36",
        xzscore: "37",
        ljscore: "38",
        zyscore: "39",
        xsscore: "38"
    }
    ])


// 定义：第一列 5 行，第二列拆分 2+2+2+4+2 = 12 行，第三列展示文本
const sampleData = [
  // 大类1（2行）
  { group: 1, firstLabel: "选题意义", firstValue: "99", firstRatio: 10, secondLabel: "价值导向", secondValue: "99", secondRatio: 50, text: "体现立德树人要求，符合党和国家方针政策和法律法规，符合党和国家社会科学与人文科学发展方向，符合社会主义核心价值观。" },
  { group: 1, firstLabel: "选题意义", firstValue: "99", firstRatio: 10, secondLabel: "选题目的与意义", secondValue: "99", secondRatio: 50, text: "符合专业培养目标，体现综合训练基本要求；面向所在专业领域学术问题或行业社会实际问题，有一定的理论或实用价值。" },

  // 大类2（2行）
  { group: 2, firstLabel: "写作安排", firstValue: "99", firstRatio: 10, secondLabel: "写作形式", secondValue: "99", secondRatio: 20, text: "写作形式符合专业特点和选题需要。" },
  { group: 2, firstLabel: "写作安排", firstValue: "99", firstRatio: 10, secondLabel: "工作量", secondValue: "99", secondRatio: 80, text: "工作量饱满，能反映出学生的综合能力培养过程。" },

  // 大类3（2行）
  { group: 3, firstLabel: "逻辑构建", firstValue: "99", firstRatio: 20, secondLabel: "内容组织", secondValue: "99", secondRatio: 50, text: "核心模块完备，层次分明，重点突出，详略得当。" },
  { group: 3, firstLabel: "逻辑构建", firstValue: "99", firstRatio: 20, secondLabel: "逻辑结构", secondValue: "99", secondRatio: 50, text: "概念准确，理论运用合理，研究(设计)路径合理，论点鲜明，论据确凿，论证严谨，结论可靠。" },

  // 大类4（4行）
  { group: 4, firstLabel: "专业能力", firstValue: "99", firstRatio: 40, secondLabel: "文献调研能力", secondValue: "99", secondRatio: 70, text: "综合分析国内外文献，追踪本领域研究现状或行业动态，能支撑该论文(设计)的选题。" },
  { group: 4, firstLabel: "专业能力", firstValue: "99", firstRatio: 40, secondLabel: "综合应用知识能力", secondValue: "99", secondRatio: 10, text: "将相关领域的基础理论、专业知识合理应用到研究(设计)工作中，能体现所在专业领域的能力和素养。" },
  { group: 4, firstLabel: "专业能力", firstValue: "99", firstRatio: 40, secondLabel: "分析解决问题能力", secondValue: "99", secondRatio: 10, text: "掌握基础的专业知识和研究方法，善于发现问题、分析问题，体现出一定的解决本专业领域问题的能力和素养。" },
  { group: 4, firstLabel: "专业能力", firstValue: "99", firstRatio: 40, secondLabel: "创新能力", secondValue: "99", secondRatio: 10, text: "坚持问题导向，观点新颖，体现出较强的创新意识，或对实践具有一定指导意义。" },

  // 大类5（2行）
  { group: 5, firstLabel: "学术规范", firstValue: "99", firstRatio: 20, secondLabel: "行文规范", secondValue: "99", secondRatio: 50, text: "文字表达、书写格式、图表(图纸)、公式符号、缩略词等方面符合通行学术规范。" },
  { group: 5, firstLabel: "学术规范", firstValue: "99", firstRatio: 20, secondLabel: "引用规范", secondValue: "99", secondRatio: 50, text: "在资料引证、参考文献等方面符合通行学术规范和知识产权相关规定。" },
]

// 合并单元格：第一列按 group 合并
const mergeCells = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    // 找出当前 group 有多少行
    const groupRows = sampleData.filter(r => r.group === row.group).length
    // 只在第一行显示，其余行隐藏
    const isFirstRowOfGroup =
      sampleData.findIndex(r => r.group === row.group) === rowIndex
    if (isFirstRowOfGroup) {
      return { rowspan: groupRows, colspan: 1 }
    } else {
      return { rowspan: 0, colspan: 0 }
    }
  }
}

const dialogVisible = ref(false)
const dialogTableData = ref([])  // 弹窗里的表格数据
const currentRow = ref(null)     // 当前点击的行

// 打开弹窗
const openDialog = (row) => {
  dialogVisible.value = true
  currentRow.value = row
  // ✅ 弹窗用独立数据，不覆盖 tableData
  dialogTableData.value = JSON.parse(JSON.stringify(sampleData))
}

// 保存修改
const saveChanges = () => {
//   console.log("保存的数据：", dialogTableData.value)

//   // 保存到当前行
//   currentRow.value.detail = JSON.parse(JSON.stringify(dialogTableData.value))

  // 弹出成功提示
  ElMessage({
    message: '保存成功',
    type: 'success',
    duration: 1500
  })

  // 关闭弹窗
  dialogVisible.value = false
}
</script>

<style scoped>

.all{
    margin-top: 40px;
    
    margin-left: 20px;
    margin-right: 20px;
}
.lab{
    width: 65px;
}
.two{
    display: flex;
    margin: 30px;
    gap: 5px;
}
.select{
    width: 250px;
}
.input{
    width: 250px;
}
.block{
    display: flex;
    justify-content: flex-end;
    margin: 20px;
}
.button1{
    width: 70px;
    background-color: #ff3838;
    border: #ff3838;
    margin-left: 10px;
}
.button2{
    width: 70px;
    margin-left: 10px;
}
.form-container{
  margin-top: 20px;
}
</style>
